<template>
  <div class="markr">
    <div class="header">
      <div class="router">
        <div class="route" v-for="(item,index) in routeList" :key="index">
          <div class="router-view" @click="toPath($event,item.url)" v-if="index === 0">
            <img class="back" id="back" src="../../assets/zhome/back.png" alt />
            <span class="border"></span>
            <img class="back" src="../../assets/zhome/home.png" alt />
            <span class="title">{{ item.title }}</span>
          </div>
          <div class="router-next" @click="toPath($event,item.url)" v-else>
            <span class="bor" :class="index !== routeList.length - 1 ? 'gey':''"></span>
            <span class="title">{{ item.title }}</span>
          </div>
          <img
            v-if="index !== routeList.length - 1"
            class="icon-right"
            src="../../assets/zhome/right.png"
            alt
          />
        </div>
      </div>
      <div class="more">
        <img src="../../assets/zhome/more.png" alt />商标工具
      </div>
    </div>
    <div class="cont">
      <div class="left">
        <div class="head">
          <div class="img"></div>
          <div class="head-right">
            <div class="head-div">
              中创
              <span>软著</span>
              <div class="tag">
                <div>
                  <img src="../../assets/zhome/coll.png" alt /> 收藏
                </div>
                <div>
                  <img src="../../assets/zhome/share.png" alt />分享
                </div>
                <div>
                  <img src="../../assets/zhome/down.png" alt />下载
                </div>
              </div>
            </div>
            <div class="head-div1">
              <div>申请号：CN201710877125.6</div>
              <div>注册号：49732928</div>
              <div>申请日期：2017-09-25</div>
            </div>
            <div class="head-div1" style="paddingTop: 0;paddingBottom: 0">
              <div>国际分类：12类 软件开发</div>
              <div>类似群：[2401,2402,2404]</div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-1">
            <img src="../../assets/zhome/r.png" alt /> 商品/服务列表
          </div>
          <div class="card-2">
            <div class="card-2-view" v-for="(item,index) in list" :key="index">
              <img src="../../assets/zhome/w.png" alt />1201 软件开发
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-1">
            <img src="../../assets/zhome/r.png" alt /> 基本信息
          </div>
          <div class="card-cont">
            <div class="view1">
              <div class="div">商标类型</div>
              <div class="flex_3">
                <div class="div bg_white">普通商标</div>
                <div class="div">受理局</div>
                <div class="div bg_white">中国</div>
              </div>
            </div>
            <div class="view1">
              <div class="div">申请人</div>
              <div class="flex_3">
                <span class="padding_left_60">湖南中创智慧科技有限公司湖南省长沙市芙蓉区五一大道人瑞潇湘国际</span>
              </div>
            </div>
            <div class="view1">
              <div class="div">[标]申请人</div>
              <div class="flex_3">
                <span class="padding_left_60">湖南中创智慧科技有限公司</span>
              </div>
            </div>
            <div class="view1">
              <div class="div">代理机构</div>
              <div class="flex_3">
                <span class="padding_left_60">湖南中创智慧科技有限公司</span>
              </div>
            </div>
            <div class="view1">
              <div class="div">初审公告期号</div>
              <div class="flex_3">
                <div class="div bg_white border-top-none">1785</div>
                <div class="div border-top-none">初审公告日期</div>
                <div class="div bg_white border-top-none">2022-03-27</div>
              </div>
            </div>
            <div class="view1">
              <div class="div">注册公告期号</div>
              <div class="flex_3">
                <div class="div bg_white border-top-none">1797</div>
                <div class="div border-top-none">注册公告日期</div>
                <div class="div bg_white border-top-none">2022-06-28</div>
              </div>
            </div>

            <div class="view1">
              <div class="div">优先权</div>
              <div class="flex_3">
                <span class="padding_left_60">湖南中创智慧科技有限公司</span>
              </div>
            </div>
            <div class="view1">
              <div class="div">是否共有商标</div>
              <div class="flex_3">
                <div class="div bg_white">否</div>
                <div class="div">专用权期限</div>
                <div class="div bg_white">2022-06-28至2032-06-27</div>
              </div>
            </div>
            <div class="view1">
              <div class="div">后期指定日期</div>
              <div class="flex_3">
                <div class="div bg_white border-bottom">- -</div>
                <div class="div border-bottom">国际注册日期</div>
                <div class="div bg_white border-bottom">- -</div>
              </div>
            </div>

            <div class="view1">
              <div class="div">商标流程</div>
              <div class="step">
                <div class="step-cont">
                  <div class="step-cont-view select line-select">
                    <div>驳回复审-打印注册证</div>
                    <div>2022-07-20</div>
                  </div>
                  <div class="step-cont-view select line-select">
                    <div>驳回复审-打印注册证</div>
                    <div>2022-07-20</div>
                  </div>
                  <div class="step-cont-view no-select">
                    <div>驳回复审-打印注册证</div>
                    <div>2022-07-20</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ffont">商标查询信息仅供参考，实际以国家商标局为准</div>
      </div>
      <div class="right">
        <div class="title">
          <div>搜索结果</div>
          <div>共18238件专利</div>
        </div>
        <div class="list">
          <div class="list-view" v-for="(item,index) in 3" :key="index">
            <img src alt />
            <div class="list-view-right">
              <div>
                1、中创
                <span class="z_flex">有权</span>
              </div>
              <div>申请号：CN201710877125.6</div>
              <div>国际分类：24类 互联网类</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const router = useRouter();
const route = useRoute();
let checked1 = ref(false);

let list = ref([{}, {}, {}, {}, {}, {}, {}, {}]);

let formList = ref([
  {
    title: "国际分类",
    child: [
      {
        name: "01类 化学原料",
        check: false
      },
      {
        name: "02类 化学原料",
        check: false
      },
      {
        name: "01类 化学原料",
        check: false
      },
      {
        name: "02类 化学原料",
        check: false
      },
      {
        name: "01类 化学原料",
        check: false
      },
      {
        name: "02类 化学原料",
        check: false
      }
    ]
  },
  {
    title: "商品服务",
    place: "请选择商品/服务项，多商品项用逗号分离",
    value: ""
  },
  {
    title: "商标有效性",
    child: [
      {
        name: "有权",
        check: false
      },
      {
        name: "无权",
        check: false
      },
      {
        name: "审中",
        check: false
      },
      {
        name: "其他",
        check: false
      }
    ]
  }
]);

let routeList = ref([
  { title: "首页", url: "/home" },
  { title: "查商标", url: "/trademark/index" },
  { title: "商标检索" }
]);

let search = ref([
  { title: "综合搜索" },
  { title: "商标名称" },
  { title: "申请号" },
  { title: "申请人" }
]);
let searchIndex = ref(0);
let crad = ref([
  {
    title: "高级检索",
    tips: "智能在线高级检索"
  },
  {
    title: "图像检索",
    tips: "智能图像检索"
  }
]);
let cradIndex = ref(0);
const back = () => {
  router.go(-1);
};

const toPath = (e, url) => {
  let id = e.target.id;
  if (id === "back") {
    back();
    return;
  }
  if (!url) {
    return;
  }
  toUrl(url);
};

const toUrl = url => {
  router.push(url);
};
</script>
<style lang="scss" scoped>
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #0052d9;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #0052d9;
  border-color: #0052d9;
}
.border-top-none {
  border-top: none !important;
}
.border-bottom {
  border-bottom: 1px solid #d6dce0 !important;
}
.step {
  flex: 3;
  border-bottom: 1px solid #d6dce0;
  border-right: 1px solid #d6dce0;
  margin-right: -1px;
  &-cont {
    padding: 30px 60px;
    &-view {
      padding-left: 34px;
      padding-bottom: 20px;
      position: relative;
      div:first-of-type {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #202020;
        line-height: 20px;
        position: relative;
      }
      div:last-of-type {
        font-size: 12px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #646770;
        line-height: 17px;
        padding-top: 3px;
      }
    }
    .select::before {
      content: "";
      width: 8px;
      height: 8px;
      background: #ffffff;
      border: 4px solid #0052d9;
      border-radius: 50%;
      position: absolute;
      top: 2px;
      left: 0;
    }
    .line-select::after {
      content: "";
      width: 1px;
      height: 100%;
      background: #0052d9;
      border-radius: 2px;
      position: absolute;
      top: 18px;
      left: 7px;
    }
    .no-select::before {
      content: "";
      width: 14px;
      height: 14px;
      background: #ffffff;
      border: 1px solid rgba(0, 82, 217, 0.31);
      border-radius: 50%;
      position: absolute;
      top: 2px;
      left: 0;
    }
    .no-select::after {
      content: "";
      width: 1px;
      height: 100%;
      background: rgba(0, 82, 217, 0.31);
      border-radius: 2px;
      position: absolute;
      top: 18px;
      left: 7px;
    }
    .no-select:last-of-type::after {
      content: "";
      width: 1px;
      height: 100%;
      background: rgba(0, 82, 217, 0);
      border-radius: 2px;
      position: absolute;
      top: 18px;
      left: 7px;
    }
  }
}
.card {
  padding-bottom: 30px;
  border-bottom: 1px solid #d6dce0;
  &-cont {
    .view1 {
      display: flex;
      .div {
        flex: 1;
        padding-left: 60px;
        min-height: 62px;
        background: #f4f6fa;
        border: 1px solid #d6dce0;
        margin-right: -1px;
        margin-bottom: -1px;
        display: flex;
        align-items: center;
      }
      .bg_white {
        background: #ffffff;
      }
      .flex_3 {
        flex: 3;
        display: flex;
        height: 62px;
        align-items: center;
        border: 1px solid #d6dce0;
        margin-right: -1px;
        margin-bottom: -1px;
        .div {
          border: none;
          border-right: 1px solid #d6dce0 !important;
          border-top: 1px solid #d6dce0;
          margin-right: 0px;
        }
        .div:last-of-type {
          border-right: none !important;
        }
      }
      .padding_left_60 {
        padding-left: 60px;
      }
    }
  }
  &-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    &-view {
      width: 23%;
      height: 72px;
      background: linear-gradient(180deg, #f0f3f7, #ffffff);
      border: 2px solid #ffffff;
      border-radius: 4px;
      box-shadow: 0px 6px 20px -2px rgba(0, 0, 0, 0.08);
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Semibold;
      font-weight: 600;
      text-align: left;
      color: #181818;
      img {
        margin: 0 16px 0 20px;
      }
    }
  }
  &-1 {
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: 600;
    text-align: left;
    color: #202020;
    line-height: 20px;
    display: flex;
    align-items: center;
    padding: 30px 0 20px;
  }
}
.cont {
  display: flex;
  padding: 72px 240px 0;
  border-bottom: 60px solid #f4f6fa;
  .left {
    flex: 1;
    padding: 0 20px;
    border: 2px solid #ffffff;
    border-radius: 4px;
    margin-right: 20px;
    background: white;
    .ffont {
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      text-align: left;
      color: #a2a6ad;
      line-height: 60px;
    }
    .head {
      padding: 38px 0 30px;
      display: flex;
      border-bottom: 1px solid rgba(214, 220, 224, 1);
      align-items: center;
      &-right {
        flex: 1;
        .head-div {
          font-size: 16px;
          font-family: PingFang SC, PingFang SC-Semibold;
          font-weight: 600;
          color: #181818;
          display: flex;
          align-items: center;
          flex: 1;
          .tag {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            div {
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: 400;
              color: #575966;
              margin-left: 20px;
              cursor: pointer;
              img {
                width: 20px;
                height: 20px;
                margin-bottom: 2px;
              }
            }
          }
          span {
            height: 18px;
            line-height: 18px;
            padding: 0 4px;
            background: rgba(0, 82, 217, 0.1);
            border-radius: 2px;
            font-weight: normal;
            font-size: 12px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            color: #0052d9;
            margin-left: 6px;
          }
        }
        .head-div1 {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #575966;
          line-height: 22px;
          padding: 16px 0 10px;
          display: flex;
          div {
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: left;
            color: #575966;
            line-height: 22px;
            position: relative;
            padding-right: 17px;
          }
          div::after {
            content: "";
            width: 1px;
            height: 10px;
            background: #dddddd;
            border-radius: 1px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 8px;
          }
          div:last-of-type::after {
            content: "";
            width: 1px;
            height: 10px;
            background: transparent;
            border-radius: 1px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 8px;
          }
        }
        .head-div2 {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #575966;
          line-height: 22px;
        }
      }
      .img {
        width: 148px;
        height: 98px;
        background: #f5f7fa;
        border-radius: 4px;
        margin-right: 20px;
      }
    }
  }
  .right {
    width: 400px;
    flex-shrink: 0;
    background: #ffffff;
    border-radius: 4px;
    padding: 0 34px 0 20px;
    .list {
      &-view {
        height: 116px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        cursor: pointer;
        &-right {
          padding-left: 12px;
          div:first-of-type {
            font-size: 16px;
            font-family: PingFang SC, PingFang SC-Semibold;
            font-weight: 600;
            text-align: left;
            color: #202020;
            line-height: 20px;
            display: flex;
            align-items: center;
            span {
              width: 32px;
              height: 18px;
              background: rgba(0, 82, 217, 0.1);
              border-radius: 2px;
              font-size: 12px;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: 400;
              color: #0052d9;
              margin-left: 6px;
            }
          }
          div:nth-of-type(2) {
            padding: 10px 0 6px;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            color: #575966;
            line-height: 20px;
          }
          div:nth-of-type(3) {
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            color: #575966;
            line-height: 20px;
          }
        }
        img {
          width: 118px;
          height: 81px;
          background: red;
        }
      }
    }
    .title {
      border-bottom: 1px solid #d8deea;
      padding-bottom: 20px;
      div:first-of-type {
        padding: 20px 0 12px;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: 600;
        text-align: left;
        color: #202020;
        line-height: 20px;
      }
      div:last-of-type {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #202020;
        line-height: 20px;
      }
    }
  }
}
.header {
  width: calc(100% - 240px);
  height: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-left: 240px;
  position: fixed;
  background-color: #f5f7fa;
  top: 110px;
  left: 0;
  z-index: 999;
  .more {
    display: flex;
    align-items: center;
    padding-right: 240px;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    color: #202020;
    line-height: 20px;
    cursor: pointer;
    img {
      margin-right: 2px;
    }
  }
}
.router {
  display: flex;
  flex: 1;

  .title {
    font-size: 12px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #575966;
  }
  .route {
    display: flex;
    align-items: center;
    .icon-right {
      width: 10px;
      height: 10px;
      margin: 0 10px;
    }
  }
  &-next {
    padding: 0 12px;
    height: 32px;
    background: #ffffff;
    border-radius: 2px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .bor {
      width: 6px;
      height: 6px;
      background: #0052d9;
      border-radius: 3px;
      margin-right: 10px;
    }
    .gey {
      background: #575966;
    }
  }
  &-view {
    padding: 0 12px;
    height: 32px;
    background: #ffffff;
    border-radius: 2px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .border {
      width: 1px;
      height: 10px;
      background: #d8d8d8;
      margin: 0 12px;
    }
    .title {
      margin-left: 10px;
    }
    .back {
      width: 14px;
      height: 14px;
    }
  }
}
</style>